<!--
 * @Date: 2021-12-14 10:30:10
 * @LastEditors: LeeKing
 * @LastEditTime: 2021-12-19 17:49:11
 * @FilePath: \admin\src\views\commodity\goods\index.vue
-->
<template>
  <div class="Goods">
    <!-- 表格 -->
    <div class="card_body">
      <div class="form">
        <div class="Search_input">
          <el-input v-model="input" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-button type="primary" class="btn_add">添加用户</el-button>
        </div>

        <el-table :data="goodsData" border style="width: 100%" stripe>
          <el-table-column label="#" width="48" type="index" />
          <el-table-column prop="goods_name" label="商品名称" width="1100" />
          <el-table-column
            prop="goods_price"
            label="商品价格（元）"
            width="120"
          />
          <el-table-column prop="goods_weight" label="商品重量" width="80" />
          <el-table-column prop="add_time" label="创建时间" width="140" />
          <el-table-column label="操作" width="120" />
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="queryData.CurrentPage"
          :page-sizes="[2, 4, 8, 10]"
          :page-size="queryData.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/goods.js'
export default {
  name: 'Goods',
  data() {
    // 添加用户信息
    return {
      queryData: {
        CurrentPage: 1,
        PageSize: 10
      },
      total: 0,
      // 查询的输入参数：
      input: '',
      // 商品表格
      goodsData: []
    }
  },
  created() {
    this.loadGoodsList()
  },
  methods: {
    async loadGoodsList() {
      const res = await getGoodsList({
        pagenum: this.queryData.CurrentPage,
        pagesize: this.queryData.PageSize
      })
      this.goodsData = res.data.goods
      this.total = res.data.total
      console.log(res)
    },
    handleSizeChange(val) {
      console.log(1)
    },
    handleCurrentChange(val) {
      console.log(1)
    }
  }
}
</script>

<style scoped lang="scss">
.Goods {
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .card_body {
    background-color: #fff;
    margin: 10px;
    .form {
      padding: 20px 20px 10px 20px;
      .Search_input {
        margin-right: 10px;
        .el-input {
          width: 500px;
        }
        .el-button--primary {
          margin-left: 20px !important;
        }
      }

      .el-table {
        margin: 15px 0;
        button {
          width: 44px;
          height: 28px;
        }
      }
    }
    .el-pagination {
      padding: 0 0 20px 20px !important;
    }
  }
  .roles-box {
    div {
      padding: 10px;
    }
    span {
      padding: 10px 0 10px 10px;
    }
  }
}
</style>
